<template>
    <card
        :title="$t('wp-she-bei-bao-jing')"
        :titleBolder="true">
        <template
            v-if="tableData.length > 0">
            <div
                class="alarm-cell"
                v-for="(item, index) in tableData"
                :key="index">
                <div class="alarm-info">{{item.value}}</div>
                <div class="alarm-time">{{item.timestamp}}</div>
            </div>
        </template>
        <wp-null-data-area
            class="no-data"
            :null-data-msg="$st('wp_No_data')"
            v-if="tableData.length === 0"
            null-text-msg-color="rgba(0,0,0,0.6)"
        />
        <div
            class="opt-box"
            v-if="allnum > 5">
            <van-button
                plain
                color="#1890ff"
                @click="toMore()"
                class="btn">{{ $t('wp-geng-duo') }}</van-button>
        </div>
    </card>
</template>
<script>
import { reactive, toRefs, onActivated, onDeactivated } from 'vue';
import card from '@/components/_common/card.vue';
import { deviceviewSetup } from '@/setup/deviceview/deviceviewSetup.js';
import moment from 'moment';
import { useRouter } from 'vue-router';

export default {
    components: {
        card
    },
    props: {
        uuid: String
    },
    setup (props, ctx) {
        const { getAlarmDataInfo } = deviceviewSetup();

        const state = reactive({
            tableData: [],
            allnum: 0,
            interval: null
        });

        const router = useRouter();

        // 获取设备报警数据
        const getAlarmData = (page, pagesize) => {
            state.tableData = [];
            if (!props.uuid) {
                return;
            }
            if (page < 1) {
                return false;
            }
            const skip = (page - 1) * pagesize;
            getAlarmDataInfo({
                uuid: props.uuid,
                skip: skip,
                page_n: pagesize
            }).then((data) => {
                state.allnum = data.number;
                state.tableData = data.value.map((item) => {
                    item.timestamp = timeformat(item.timeStamp);
                    return item;
                });
            });
        };

        // 时间处理
        const timeformat = (time) => {
            return moment(time).format(
                'YYYY-MM-DD HH:mm:ss'
            );
        };

        // 跳转到更多设备报警页面
        const toMore = () => {
            router.push({
                path: 'deviceAlarmMore',
                query: {
                    uuid: props.uuid
                }
            });
        };

        const refresh = () => {
            getAlarmData(1, 5);
        };

        onActivated(() => {
            refresh();
            state.interval = setInterval(() => {
                refresh();
            }, 15000);
        });

        onDeactivated(() => {
            state.interval && clearInterval(state.interval);
        });

        return {
            ...toRefs(state),
            getAlarmDataInfo,
            getAlarmData,
            timeformat,
            toMore
        };
    }
};
</script>
<style scoped lang="scss">
.alarm-cell {
    background: #fbf4f4;
    border-radius: 3px;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 13px;
    .alarm-info {
        color: #e64566;
        margin-bottom: 3px;
    }
    .alarm-time {
        color: rgba(0,0,0,0.60);
    }
}
.opt-box {
    padding-top: 10px;
    text-align: right;
    .btn {
        height: 30px;
        border-radius: 5px;
        border: 1px solid #1890ff;
    }
}

.no-data {
    margin-bottom: 10px;
    font-size: 13px;
}
</style>
